<template>
  <div class="bgGray">
    <div>
      <div class="orderStatus flexBetween">
        <div class="flexBetweenCol" style="margin-left: 2.67vw">
          <p>{{ orderForm.orderStatus | formStatus }}</p>
          <p class="flexStart" v-if="orderForm.orderStatus == 1">
            剩余时间：
            <van-count-down
              style="color: #fff"
              :time="orderForm.time"
              format="mm 分 ss 秒"
            />
          </p>
        </div>
        <img :src="imgUrl + '/bigRun/ico/pay.png'" />
      </div>
      <div>
        <div class="flexStart address" v-if="addressInfo">
          <div class="addressLfet">
            <img :src="imgUrl + '/bigRun/ico/address.png'" />
          </div>
          <div class="addressRight">
            <div>
              <span>{{ addressInfo.deliveryName }}</span> &nbsp;&nbsp;<span>{{
                addressInfo.mobilePhone
              }}</span>
            </div>
            <div>
              {{ addressInfo.provinceName }}{{ addressInfo.cityName
              }}{{ addressInfo.areaName }}{{ addressInfo.detailAddress }}
            </div>
          </div>
        </div>
        <div class="line"></div>
      </div>
    </div>
    <div class="line"></div>

    <div class="orderdetails">
      <div ref="liCon">
        <div class="orderCon order-row2">
          <div class="orderInfo">
            <img :src="orderForm.productThumbnail" />
            <div style="width: 100%">
              <p class="goodsName textOverflow">{{ orderForm.productName }}</p>
              <p class="goodsName payPrice" style="text-align: right">
                ¥{{ Number(orderForm.orderPrice) * Number(orderForm.quantity) }}
              </p>
              <div class="flexStart goodsPrice">
                <span>¥{{ orderForm.orderPrice }}</span>
                <span style="margin-left: 7vw"
                  >数量:{{ orderForm.quantity }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="orderdetails">
      <div
        style="
          font-size: 4vw;
          color: #000000;
          text-align: left;
          margin-bottom: 10vw;
        "
      >
        商品金额
      </div>
      <div class="goodsInfo">
        <div class="flexBetween">
          <p style="color: #7c7c7c">优惠</p>
          <p style="color: #7c7c7c">-¥{{ orderForm.discountPrice }}</p>
        </div>
        <div class="flexBetween">
          <p style="color: #000000">实付</p>
          <p style="color: #d93939">¥{{ orderForm.payPrice }}</p>
        </div>
      </div>
    </div>

    <div class="orderdetails">
      <div class="goodsInfo" style="padding-top: 2vw">
        <div class="flexStart">
          <p>订单编号</p>
          <p>{{ orderForm.orderNo }}</p>
          <span
            class="tag-read orderNoCopy"
            :data-clipboard-text="orderForm.orderNo"
            @click="copyOrder"
            >复制</span
          >
        </div>

        <div class="flexStart">
          <p>下单时间</p>
          <p>{{ orderForm.payTime }}</p>
        </div>
      </div>
    </div>

    <div
      v-if="orderForm.orderStatus == 5"
      class="orderBtn flexBetween orderBtn1"
      style="background: 0 none"
    >
      <span class="detailBtn" @click="goConfirm">重新购买</span>
      <span class="detailBtn" @click="confirmGoods">确认收货</span>
    </div>
    <div
      v-else-if="
        orderForm.orderStatus == 3 ||
        orderForm.orderStatus == 4 ||
        orderForm.orderStatus == 6
      "
      class="orderBtn flexBetween orderBtn1"
      style="background: 0 none"
    >
      <!-- /**
       * @name: Hou
       * @msg: 14567 无申请退款
       * @Date: 2020-12-15 15:32:40
       */ -->
      <span
        v-if="orderForm.orderType == 5 || orderForm.orderType == 6"
        class="detailBtn"
        @click="applyRefund"
        style="background: rgb(212, 212, 212); color: #7c7c7c"
        >申请退款</span
      >

      <span class="detailBtn" @click="goConfirm">重新购买</span>
    </div>

    <div class="orderBtn2" v-else>
      <span
        v-show="orderForm.orderStatus == 1"
        @click="continueToPay(orderForm.orderNo)"
        >去支付</span
      >
      <span v-show="orderForm.orderStatus != 1" @click="goConfirm"
        >重新购买</span
      >
    </div>

    <div id="yinHangZhifuZhi" class="yinHangZhifu"></div>
  </div>
</template>

<script>

import Clipboard from 'clipboard'
import { Toast } from 'vant'

export default {
  name: 'paySuccess',
  components: {},
  data() {
    return {
      ruleForm: {},
      editFlag: false,
      boxStyle: {
        transition: 'height .3s',
        overflow: 'hidden',
        height: 'auto',
        'margin-bottom': '2.67vw'
      },
      addressInfo: null,
      ImgNewUrl: '',
      payFlag: false,
      token: '',
      orderForm: {
        time: 0,
        orderStatus: 8,
        payAmount: 11,
        userName: '刘敬',
        couponCode: '1232343',
        userPhone: '17621760000',
        address: '上海 太原市 市辖区 吴中路没哼大厦4楼',
        createTime: '2020-12-23 10:10:10',
        couponPresentRecord: true,
        majorOrderNo: '12324354',
        orderNo: '12324354',
        list: [{
          createTime: '2020-11-12',
          productName: 'ergrg',
          quantity: '1',
          originalPrice: '100',
          discountPrice: '90'
        }]
      }
    }
  },
  filters: {
    formStatus(status) {
      const statusMap = {
        1: "待付款",
        2: "支付超时",
        3: "支付成功",
        4: "待发货",
        5: "已发货",
        6: "已收货",
        7: "退款中",
        8: "退款成功",
        9: "失败",
        10: "已取消",
      }
      return statusMap[status]
    }
  },
  created() {
    this.orderForm = JSON.parse(window.sessionStorage.getItem('orderDetail'))
    // console.log('orderForm===>>>>商品详情：', this.orderForm)
    this.getDetail()
  },
  mounted() {
    this.timers()// 倒计时
  },
  methods: {
    getDetail() {
      console.log(JSON.parse(window.sessionStorage.getItem('orderDetail')))
      const params = { activityProductNo: this.$route.query.activityProductNo }
      // console.log('activityProductNo', params)
    },
    timers() {
      var nowTime = new Date()
      var endTime = new Date(
        this.orderForm.orderExpireTime.replace(/-/g, '/')
      )
      var t = endTime.getTime() - nowTime.getTime()
      this.$set(this.orderForm, 'time', t)
      // console.log(this.orderForm.time)
    },
    // 计算倒计时
    timeCountDown() {
      // this.countArrTime.forEach(item => {
      const date = '2020-11-12 18:00:00'
      this.$utils.timeCountDown(date, (value, clear) => {
        this.countTime = value
        // this.$set(item, "countTime", value)
        this.$once('hook:beforeDestroy', clear)
        // })
      })
    },
    callPhone() {
      document.addEventListener('deviceready', function () {
        window.c_plugins.merchantBridge.actionCallUp(function () {
          // alert('suc');
        }, function (err) {
          alert(err.message || err || '网络错误，请检查网络连接')
        }, {
          phoneNumber: '4008200668'// 拨打电话号码
        })
      })
    },
    // 继续支付
    continueToPay(orderNo) {  // √
      console.log('继续支付===>>>>orderNo', orderNo)
      if (this.payFlag) {
        return
      }
      this.payFlag = true
      const params = { orderNo: orderNo }
      this.$HttpPost(this.$api.continuePay, params).then(res => {
        if (res.code === '000') {
          document.getElementById('yinHangZhifuZhi').innerHTML = res.content
          document.forms[0].submit()
          document.getElementById('yinHangZhifuZhi').innerHTML = ''
        } else {
          this.$toast(res.desc, 'middle')
        }
        this.payFlag = false
      })
    },
    // 复制
    copyOrder() {
      var clipboard = new Clipboard('.orderNoCopy')
      clipboard.on('success', (e) => {
        this.$toast('复制成功', 'middle')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        this.$toast('复制失败', 'middle')
        // 释放内存
        clipboard.destroy()
      })
    },
    // 返回首页
    backHome() {
      this.$router.replace('/')
    },
    // 重新购买 再次购买
    goConfirm() {  //根据orderType跳转 确认订单页
      // orderForm   订单编号
      console.log(this.orderForm)
      let orderForm = this.orderForm
      let orderType = this.orderForm.orderType
      console.log('orderType:======>>>>>', orderType)

      //  备注：orderType  订单类型  { 2酒店甄选权益 3免费领取 4直冲 }  { 1酒店套餐 5卡券 6实物 7酒店子商品 }

      if (orderType == 1 || orderType == 7) {  // 1酒店套餐 7酒店子商品  √
        this.$router.push({
          path: '/hotel/list',
          query: {
            activityProductNo: orderForm.activityProductNo
          }
        })
      } else if (orderType == 2) {  //2酒店甄选权益列表  √
        console.log('跳  actInterest :>> ');
        this.$router.push({
          path: '/actInterest',
          query: {
            activityProductNo: orderForm.activityProductNo,
            equityNo: orderForm.equityNo,
            productName: orderForm.productName,
          }
        })
      } else if (orderType == 3) {  //3免费领取 √
        this.$router.push({
          path: '/free',
          query: {
            activityProductNo: orderForm.activityProductNo
          }
        })

      } else { // 4 5 6 7  √
        console.log('orderType=> 4 5 6 7  ')
        this.$router.push({
          path: '/goods/details',
          query: {
            activityProductNo: orderForm.activityProductNo
          }
        })
      }
    },
    applyRefund() {  //去 退款页面 √
      console.log('orderNo', this.orderForm.orderNo)
      this.$router.push({  //feedback
        path: '/feedback',
        query: {
          orderNo: this.orderForm.orderNo, //订单号
          number: this.orderForm.quantity,  //数量
          orderType: this.orderForm.orderType,
        }
      })
      // this.$router.go(-1)

    },
    // 确认收货 √
    confirmGoods() {
      this.$dialog.confirm({
        title: '',
        message: '确定收货？'
      }).then(() => {
        const params = { orderNo: this.orderForm.orderNo }
        console.log('orderNo', params)
        this.$HttpPost(this.$api.confirm, params).then(res => {
          if (res.code === '000') {
            this.$router.go(-1)
            Toast('确认收货成功')
          } else {
            Toast(res.desc)
          }
        })
      }).catch(() => {
        // on cancel
      })
    }

  }
}
</script>

<style scoped lang="scss">
.resultMsg {
  width: 100%;
  border-top: 1px solid #ececec;
  padding: 2.66vw 4.26vw;
  color: #b9b9b9;
  font-size: 2.93vw;
  box-sizing: border-box;
  margin-top: 14.4vw;
}

.orderBtn {
  position: absolute;
  bottom: 55px;
  left: 50%;
  transform: translateX(-50%);
  width: 690px;
  /**
   * @name: Hou
   * @msg: // width: 690px;
   * @Date: 2020-12-15 15:43:41
   */
  height: 90px;
  background: linear-gradient(180deg, #d1203c, #b0071e 99%);
  border-radius: 45px;
  margin: 0 auto;
  font-size: 30px;
  color: #000000;
  line-height: 90px;

  img {
    width: 50px;
    height: 50px;
    vertical-align: middle;
    margin: 0px 0 0 30px;
  }

  .detailBtn {
    margin-right: 20px;
  }

  span {
    width: 480px;
    text-align: center;
    color: #ffffff;
  }
}

.orderBtn1 {
  a {
    width: 45px;
    background: 0 none;
    margin-right: 30px;
  }

  .detailBtn {
    // width: 280px;
    /**
     * @name: Hou
     * @msg: // width: 280px;
     * @Date: 2020-12-15 15:44:55
     */
    border-radius: 45px;
    background: linear-gradient(180deg, #d1203c, #b0071e 99%);
  }

  .detailBtn:first-of-type {
    background: linear-gradient(270deg, #fcdfdb, #eda897 99%);
    color: #b0071e;
  }
}

.line {
  width: 100%;
  height: 2.67vw;
  background: #f8fafd;
}

.orderdetails {
  width: 720px;
  background: #ffffff;
  border-radius: 14px;
  padding: 30px;
  margin: 0 auto 20px;
  font-size: 26px;
  color: #7c7c7c;
  box-sizing: border-box;

  .goodsName {
    font-size: 30px;
    color: #000000;
    line-height: 40px;
    text-align: left;
  }

  .payPrice {
    margin: 20px 0;
  }

  .goodsPrice {
    width: 100%;
    line-height: 40px;
  }

  .infoTitle {
    color: #454545;
  }
}

.alert {
  padding: 4.67vw 0;
  color: #34343e;
  background: #f8fafd;
  text-align: center;
}

.goodsInfo {
  div {
    margin-top: 1vw;
    position: relative;
  }

  p:nth-child(1) {
    // font-weight: 700;
    margin-right: 20px;
  }

  p {
    color: #7c7c7c;
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 10px;
  }

  .tag-read {
    position: absolute;
    top: 0%;
    right: 0;
    width: 78px;
    background: linear-gradient(180deg, #d1203c, #b0071e 99%);
    border-radius: 10px;
    font-size: 22px;
    line-height: 18px;
  }
}

.orderCon {
  display: flex;
  justify-content: space-between;

  .orderInfo {
    width: 100%;
    display: flex;
  }

  .orderInfo img {
    // width:15.733vw;
    // height:15.733vw;
    height: 21.06vw;
    width: 27.73vw;
    margin-right: 2.67vw;
  }
}

.order-row2 {
  position: relative;
  margin-bottom: 2vw;
  box-sizing: border-box;
}

.orderStatus {
  width: 750px;
  height: 188px;

  padding: 20px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #d75f41, #cf1c19);

  font-size: 29px;
  text-align: left;
  color: #ffffff;
  line-height: 41px;

  img {
    width: 228px;
    height: 153px;
  }

  span {
    line-height: 150px;
    margin-left: 40px;
  }
}

.orderBtn2 {
  position: absolute;
  bottom: 55px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  /**
   * @name: Hou
   * @msg:  width: 100%;
   * @Date: 2020-12-15 15:43:41
   */
  height: 90px;
  background: linear-gradient(180deg, #d1203c, #b0071e 99%);
  border-radius: 45px;
  margin: 0 auto;
  font-size: 30px;
  color: #000000;
  line-height: 90px;

  img {
    width: 50px;
    height: 50px;
    vertical-align: middle;
    margin: 0px 0 0 30px;
  }

  span {
    width: 480px;
    text-align: center;
    color: #ffffff;
  }
}
</style>
